{% if isFramework("javascript") %}
### Cell Component Function

Instead of using a class component, it's possible to use a function for a Cell Component. The function takes the same parameters as the Cell Component `init` method in the class variant. The function should return back  either a) a string of HTML or b) a DOM object.

Use the function variant of a Cell Component if you have no refresh or cleanup requirements (ie you don't need to implement the refresh or destroy functions).

Below are some simple examples of Cell Components provided as simple functions:
{% /if %}

{% if isFramework("javascript") %}
```js
// uppercase the value
colDef.cellRenderer = params => `${params.value.toUpperCase()}`;

// put a tooltip on the value
colDef.cellRenderer = params => `<span title="the tooltip">${params.value}</span>`;

// create a DOM object
colDef.cellRenderer = params => {
    const eDiv = document.createElement('div');
    eDiv.innerHTML = '<span class="my-css-class"><button class="btn-simple">Push Me</button></span>';
    const eButton = eDiv.querySelectorAll('.btn-simple')[0];

    return eDiv;
}
```
{% /if %}
